<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>《系统工程》精品资源共享课——拓展资源</title>
	<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="../css/common.css">
	<style type="text/css">
		main{
			display:flex;
			margin:30px 100px;
			padding-bottom: 40px;
			min-height: 530px
		}
		#catalog{
			margin:10px 10px 80px 0px;
			background-color: white;
			border-radius: 8px;
			min-width:270px;
			
		}
		#catalog ul li{
			list-style: none;
			padding:25px 30px;
			cursor: pointer;
			font-size:16px;
			border-radius: 4px;
			width:100%;
		}
		#catalog ul li:hover{
			background-color:#504D4D;
			color:white;
		}
		.li-click{
			background-color:#2C2B2B;
			color:white;
		}
		#content{
			border-radius: 8px;
			background-color: white;
			padding:30px;
			margin:10px 0px 80px 10px;
			min-width:600px;
			
		}
		#content div a{
			display: block;
			padding:15px 10px;
			font-size: 20px
		}
		#content div a  img{
			display: inline-block;
			margin:auto 10px;
		}
		footer{
			min-height:100px;
			width:100%;
			position:absolute;
			background-color:#393434;
			bottom:0px;
		}
		footer p{
			position:absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			color: white;
		}
	</style>
</head>
<body>
	<div id="top">
		<img src="../image/huanonglogo.png" class="logo">
		<ul>
			<li class="userInfo hidden"><a href="userInformation.html">个人信息</a></li>
			<li><span id="user"></span></li>
			<li class="logout hidden"><a href="login.html">退出</a></li>
			<li id="login" class="login"><a href="login.html"><img src="../image/user.png"><span>登录</span></a></li>
		</ul>
	</div>
	<nav>
		<ul class="rows">
			<li class="col-md-2"><a href="../index.html">首页</a></li>
			<li class="dropdown col-md-2">
				<a href="#"  data-toggle="dropdown" class="dropdown-toggle">课程概要<span class="glyphicon glyphicon-chevron-down"></span></a>
				<ul class="dropdown-menu">
					<li><a href="primaryResource.html">教学大纲</a></li>
					<li><a href="primaryResource.html">教学日历</a></li>
					<li><a href="primaryResource.html">教学教材</a></li>
					<li><a href="primaryResource.html">参考资料</a></li>
					<li><a href="primaryResource.html">重点难点</a></li>
				</ul>
			</li>
			<li class="dropdown col-md-2">
				<a href="#"  data-toggle="dropdown" class="dropdown-toggle">课程资源<span class="glyphicon glyphicon-chevron-down"></span></a>
				<ul class="dropdown-menu">
					<li><a href="video.html">教学视频</a></li>
					<li><a href="ppt.html">教学课件</a></li>
					<li><a href="homework.html">作业</a></li>
				</ul>
			</li>
			<li class="col-md-2"><a href="courses.html">课程内容</a></li>
			<li class="col-md-2"><a href="expandingResource.html">拓展资源</a></li>
			<li class="col-md-2 hidden teacher_li"><a href="teacherCourseManagement.html">课程管理</a></li>
		</ul>

	</nav>
	<main class="rows">
		<section id="catalog" class="col-md-4">
			<ul>
				<li class="li-click">教学案例</li>
				<li>习题库</li>
				<li>相关学习网站</li>
			</ul>
		</section>
		<section id="content" class="col-md-8">
			<div>
				<a href="../resource/Anli.ppt"><img src="../image/xiazai.png">系统工程应用案例</a>
				<a href="../resource/DuJianYan.doc"><img src="../image/xiazai.png">都江堰水利工程案例</a>
			</div>
			<div>
				<a href="../resource/XiTiKu.docx"><img src="../image/xiazai.png">系统工程习题库</a>
			</div>
			<div>
				<a href="http://www.scholat.com/course/xitonggongcheng">1、学者网《系统工程》学习网站</a>
				<a href="http://jse.tju.edu.cn/ch/index.aspx">2、系统工程学报</a></li>
				<a href="http://oc.xjtu.edu.cn/course/89/play">3、西安交通大学系统工程网络公开课</a>
			</div>
		</section>
	</main>
	<footer>
		<p>版权所有：华南农业大学 数学与信息学院 软件学院</p>
	</footer>
	<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../js/common.js"></script>
	<script type="text/javascript">
		$("#content div").eq(0).show().siblings().hide();
		$("#catalog ul").on("click","li",function(ev){
			var target=$(ev.target);
			var ids=target.index();
			$("#content div").eq(ids).show().siblings().hide();
			target.addClass('li-click');
			target.siblings().removeClass('li-click');
		});
	</script>
</body>
</html>